<script setup>
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// ------------------------------用户搜索
const formInline = reactive({
    userId: '',
    username: '',
    nickname: '',
    regst: 'all',
    reg: 'all',
    hot: 'all',
    dis: 'all',
    sup: 'all',
    dic: 'all',
    regTime: ''
})

const onSubmit = () => {
    console.log('submit!')
}
// ------------------------------用户数据
let users = reactive([
    {
        id: 1001, nickname: "小风扇*1个", avatar: "../public/xfs.png", num: "500个"
    },
    {
        id: 1002, nickname: "鼠标垫*1个", avatar: "../public/sbd.png", num: "300个"
    },
    {
        id: 1003, nickname: "原神手办*1个", avatar: "../public/yssb.jpg", num: "200个"
    },
    {
        id: 1004, nickname: "钥匙挂件*1个", avatar: "../public/ysgj.png", num: "600个"
    },
    {
        id: 1005, nickname: "保温杯*1个", avatar: "../public/bwb.png", num: "200个"
    },
    {
        id: 1006, nickname: "定制手机壳*1个", avatar: "../public/sjk.png", num: "300个"
    },
    {
        id: 1007, nickname: "数据线*1m", avatar: "../public/sjx.png", num: "500条"
    },
    {
        id: 1008, nickname: "卫生纸*1包", avatar: "../public/wsz.png", num: "500包"
    },
    {
        id: 1009, nickname: "砖石若干", avatar: "../public/zs.png", num: "1000个"
    }

])

// ------------------------ 分页

const currentPage = ref(1)
const pageSize = ref(100)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

// ---------------------- 删除用户操作
// 弹出二次确认对话框：参数user就是要删除的用户：
function showConfirm(user) {
    ElMessageBox.confirm(
        '确定要删除 ' + user.nickname + ' 用户吗?',
        '警告信息',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用删除函数：删除用户
            deleteUser(user);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '管理员取消了删除操作',
            })
        })

}

// 删除用户的函数：参数user就是要删除的用户
function deleteUser(user) {
    // 查询用户在数组中的索引
    let index = users.findIndex(item => item.id === user.id)
    // 删除用户数据
    users.splice(index, 1)
    // 提示删除成功
    ElMessage({
        type: 'success',
        message: '管理员成功删除了奖励： ' + user.nickname,
    })
}

// ------------------ 新增用户操作 
// import DialogUserCreate from '../components/DialogUserCreate.vue'
// // 声明变量控制弹窗显示/隐藏
// let userDialogCreate = ref(false)
// // 准备函数：显示对话框
// function showCreateDialog() {
//     userDialogCreate.value = true
// }
// // 准备函数：隐藏对话框
// function hideCreateDialog() {
//     userDialogCreate.value = false
// }
// // 新增用户数据：参数user就是子组件告诉父组件要新增的用户
// function createUser(user) {
//     // 计算新用户的id
//     let id = users[0].id + 1
//     // 复制一份用户数据
//     let newUser = { ...user }
//     // 给新数据添加id属性
//     newUser.id = id
//     // 新增用户
//     users.unshift(newUser)
// }


</script>
<template>
    <div class="p-header">
        <h2>用户管理</h2>
        <el-button type="primary" @click="showCreateDialog">新增用户</el-button>
    </div>
    <!-- 新增用户弹窗 -->
    <DialogUserCreate :dialogFormVisible="userDialogCreate" @createUserEvent="createUser"
        @closeCreateEvent="hideCreateDialog"></DialogUserCreate>

    <el-divider>用户信息搜索</el-divider>
    <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">  
            <el-form-item label="昵称：">
                <el-input v-model="formInline.nickname" placeholder="请输入用户昵称" clearable />
            </el-form-item>
        </el-form>
    </el-card>
    <el-divider>用户信息展示</el-divider>
    <el-table :data="users" style="width: 100%">
        <el-table-column label="奖励编号" prop="id" width="120" />
        <el-table-column label="奖励名称" prop="nickname" width="250" />
        <el-table-column label="奖励图片" prop="avator" width="300">
            <template #default="{ row }">
                <el-avatar shape="square" :src="row.avatar" :size="150" />
            </template>
        </el-table-column>
        <el-table-column label="余额" prop="num" width="150" />

        <el-table-column align="right" fixed="right" width="300" label="操作">
            <template #default="scope">
                <el-button-group>
                    <el-button type="success" size="big">编辑</el-button>
                    <el-button type="danger" size="big" @click="showConfirm(scope.row)">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background v-model:current-page="currentPage" v-model:page-size="pageSize"
        :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
        layout="total, sizes, prev, pager, next, jumper" :total="1000" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>
<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 100px;
    font-size: 14px;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-pagination {
    margin-top: 20px;
}

.p-header {
    display: flex;
    justify-content: space-between;
}

.el-table-column {
    /* 设置字体居中 */
    text-align: center !important;

}
</style>